<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form id="form1">
    <label for="range1">range: <input type="range" max="100" min="1" name="range1" id="range1" /></label><br/>
    <fieldset>
        <label for="box1_1"><input type="checkbox" name="box1" id="box1_1" value="1">Box 1</label>
        <label for="box1_2"><input type="checkbox" name="box1" id="box1_2" value="2">Box 2</label>
        <label for="box1_3"><input type="checkbox" name="box1" id="box1_3" value="3">Box 3</label>
        <label for="box1_4"><input type="checkbox" name="box1" id="box1_4" value="4">Box 4</label>
    </fieldset>
    <fieldset>
        <label for="radio1"><input type="radio" name="radio1" id="radio1" value="1"/>Radio 1</label>
        <label for="radio2"><input type="radio" name="radio1" id="radio2" value="2"/>Radio 2</label>
        <label for="radio3"><input type="radio" name="radio1" id="radio3" value="3"/>Radio 3</label>
        <label for="radio4"><input type="radio" name="radio1" id="radio4" value="4"/>Radio 4</label>
    </fieldset>
    <label for="select1">Select a item: <select id="select1" name="select1">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
    </select></label><br/>
    <label for="color1">Pickup a color: <input type="color" name="color1" id="color1"/></label><br/>
    <label for="date1">Pickup a date: <input type="date" name="date1" id="date1"/></label><br/>
    <label for="datetime1">data time: <input type="datetime" name="datetime1" id="datetime1"/></label><br/>
    <label for="email1">Email:<input type="email" name="email1" id="email1" /></label><br/>
    <label for="file1">Select a file:<input type="file" name="file1" id="file1"/></label><br/>
    <label for="text1">a text box: <input type="text" name="text1" id="text1" /></label><br/>
    <label for="textarea1">TextArea: <textarea name="textarea1" id="textarea1"></textarea></label>
</form>
<hr />
<select data-binder-ignore="true" id="select-list">
    <option value="box1">box1</option>
    <option value="radio1">radio1</option>
    <option value="select1">select1</option>
    <option value="color1">color1</option>
    <option value="date1">date1</option>
    <option value="datetime1">datetime1</option>
    <option value="email1">email</option>
    <option value="text1">text1</option>
    <option value="textarea1">textarea1</option>
</select>
<input type="text" data-binder-ignore="true" id="value-box" />
<input type="button" data-binder-ignore="true" value="set"  id="btn-set"/>
<input type="button" data-binder-ignore="true" value="clear"  id="btn-clear"/>
<br/>
<input type="button" data-binder-ignore="true" value="show" id="btn-test"/>
<hr/>
<form id="form2">
    <p><label for="box2">TextBox2: <input type="text" id="box2" name="text_box2" /></label> </p>
    <p><label for="color2">Pickup a color: <input type="color" id="color2" name="color2" /></label> </p>
</form>
<div id="result-panel"></div>
<script type="text/javascript" charset="utf-8" src="../../lib/DataBind.js"></script>
<script>
$(function () {
//    var map = {}, binder = new DataBinder (map, {/*selector:'#form1 input, #form1 select, #form1 textarea'*/}), panel = $('#result-panel');
    var binder = new DataBinder (/*'form1'*/), map = binder.get (), panel = $('#result-panel');
    $('#btn-test').on ('click', function () {
        binder.set ('box1', [1,3,4]);
        console.log (map);
    });
    $('#btn-set').on ('click', function () {
        var target = $('#select-list').val (), value = $('#value-box').val ();
        binder.set ('form1.' + target, value);
        console.log (map);
    });
    $('#btn-clear').on ('click', function () {
        var target = $('#select-list').val (), value = $('#value-box').val ();
        binder.set ('form1.' + target);
        console.log (map);
    })
})
</script>
</body>
</html>